 <template>
    <div class="unused">
        <div class="tc">
            <router-link to="raiseSearch">
                <button class="unused-seek">搜索</button>
            </router-link>
        </div>
        <mt-navbar class="page-part" v-model="selected">
            <mt-tab-item id="1">{{type[0]}}</mt-tab-item>
            <mt-tab-item id="2">{{type[1]}}</mt-tab-item>
            <mt-tab-item id="3">{{type[2]}}</mt-tab-item>
            <mt-tab-item id="4">{{type[3]}}</mt-tab-item>
            <mt-tab-item id="5">{{type[4]}}</mt-tab-item>
            <!--<mt-tab-item  v-for="(text , index) in type" :id="getId(index)">{{index}}{{text}}</mt-tab-item>-->
        </mt-navbar>
        <mt-tab-container v-model="selected" swipeable>
            <mt-tab-container-item id="1" v-tap="test()">
                <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                    <li v-for="(list, index) in unusedType1">
                        <div class="width-75">
                            <div class="m-t-28 flex">
                                <!--头像、名字和学校-->
                                <div class="row">
                                    <div>
                                        <img :src="list.userTo.portrait" alt="" class="portrait">
                                    </div>
                                    <div class="m-l-14">
                                        <h2 class="fs-36 c-3">{{list.userTo.nickName}}</h2>
                                        <p class="fs-24 c-3 m-t-18">{{list.name}}</p>
                                    </div>
                                </div>
                                <!--<div class="rt fs-24">
                                        X
                                    </div>-->
                            </div>
                            <router-link :to="{path:'/unusedDetails',query:{id:list.goodsId}}">
                                <div>
                                    <span class="fs-30 l-h-4">
                                        <span class="c-f3 f-w">￥{{list.price}} &nbsp;</span>
                                        {{list.caption}}
                                    </span>
                                </div>
                                <div>
                                    <img v-for="imgs in unusedType1[index].images" :src="imgs" alt="" class="unused-img">
                                </div>
                            </router-link>
                        </div>
                        <div class="index-blank m-t-18">
                        </div>
                    </li>
                </ul>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                    <li v-for="(list, index) in unusedType2">
                        <div class="width-75">
                            <div class="m-t-28 flex">
                                <!--头像、名字和学校-->
                                <div class="row">
                                    <div>
                                        <img :src="list.userTo.portrait" alt="" class="portrait">
                                    </div>
                                    <div class="m-l-14">
                                        <h2 class="fs-36 c-3">{{list.userTo.nickName}}</h2>
                                        <p class="fs-24 c-3 m-t-18">{{list.name}}</p>
                                    </div>
                                </div>
                                <!--<div class="rt fs-24">
                                        X
                                    </div>-->
                            </div>
                            <router-link :to="{path:'/unusedDetails',query:{id:list.goodsId}}">
                                <div>
                                    <span class="fs-30 l-h-4">
                                        <span class="c-f3 f-w">￥{{list.price}} &nbsp;</span>
                                        {{list.caption}}
                                    </span>
                                </div>
                                <div>
                                    <img v-for="imgs in unusedType2[index].images" :src="imgs" alt="" class="unused-img">
                                </div>
                            </router-link>
                        </div>
                        <div class="index-blank m-t-18">
                        </div>
                    </li>
                </ul>
            </mt-tab-container-item>
            <mt-tab-container-item id="3">
                <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                    <li v-for="(list, index) in unusedType3">
                        <div class="width-75">
                            <div class="m-t-28 flex">
                                <!--头像、名字和学校-->
                                <div class="row">
                                    <div>
                                        <img :src="list.userTo.portrait" alt="" class="portrait">
                                    </div>
                                    <div class="m-l-14">
                                        <h2 class="fs-36 c-3">{{list.userTo.nickName}}</h2>
                                        <p class="fs-24 c-3 m-t-18">{{list.name}}</p>
                                    </div>
                                </div>
                                <!--<div class="rt fs-24">
                                        X
                                    </div>-->
                            </div>
                            <router-link :to="{path:'/unusedDetails',query:{id:list.goodsId}}">
                                <div>
                                    <span class="fs-30 l-h-4">
                                        <span class="c-f3 f-w">￥{{list.price}} &nbsp;</span>
                                        {{list.caption}}
                                    </span>
                                </div>
                                <div>
                                    <img v-for="imgs in unusedType3[index].images" :src="imgs" alt="" class="unused-img">
                                </div>
                            </router-link>
                        </div>
                        <div class="index-blank m-t-18">
                        </div>
                    </li>
                </ul>
            </mt-tab-container-item>
            <mt-tab-container-item id="4">
                <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                    <li v-for="(list, index) in unusedType4">
                        <div class="width-75">
                            <div class="m-t-28 flex">
                                <!--头像、名字和学校-->
                                <div class="row">
                                    <div>
                                        <img :src="list.userTo.portrait" alt="" class="portrait">
                                    </div>
                                    <div class="m-l-14">
                                        <h2 class="fs-36 c-3">{{list.userTo.nickName}}</h2>
                                        <p class="fs-24 c-3 m-t-18">{{list.name}}</p>
                                    </div>
                                </div>
                                <!--<div class="rt fs-24">
                                        X
                                    </div>-->
                            </div>
                            <router-link :to="{path:'/unusedDetails',query:{id:list.goodsId}}">
                                <div>
                                    <span class="fs-30 l-h-4">
                                        <span class="c-f3 f-w">￥{{list.price}} &nbsp;</span>
                                        {{list.caption}}
                                    </span>
                                </div>
                                <div>
                                    <img v-for="imgs in unusedType4[index].images" :src="imgs" alt="" class="unused-img">
                                </div>
                            </router-link>
                        </div>
                        <div class="index-blank m-t-18">
                        </div>
                    </li>
                </ul>
            </mt-tab-container-item>
            <mt-tab-container-item id="5">
                <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                    <li v-for="(list, index) in unusedType5">
                        <div class="width-75">
                            <div class="m-t-28 flex">
                                <!--头像、名字和学校-->
                                <div class="row">
                                    <div>
                                        <img :src="list.userTo.portrait" alt="" class="portrait">
                                    </div>
                                    <div class="m-l-14">
                                        <h2 class="fs-36 c-3">{{list.userTo.nickName}}</h2>
                                        <p class="fs-24 c-3 m-t-18">{{list.name}}</p>
                                    </div>
                                </div>
                                <!--<div class="rt fs-24">
                                        X
                                    </div>-->
                            </div>
                            <router-link :to="{path:'/unusedDetails',query:{id:list.goodsId}}">
                                <div>
                                    <span class="fs-30 l-h-4">
                                        <span class="c-f3 f-w">￥{{list.price}} &nbsp;</span>
                                        {{list.caption}}
                                    </span>
                                </div>
                                <div>
                                    <img v-for="imgs in unusedType5[index].images" :src="imgs" alt="" class="unused-img">
                                </div>
                            </router-link>
                        </div>
                        <div class="index-blank m-t-18">
                        </div>
                    </li>
                </ul>
            </mt-tab-container-item>
        </mt-tab-container>
        <!--底部-->
        <div>
            <div style="margin-bottom: 1rem">

            </div>
            <ul class="flex p-lr-6 footer">
                <li>
                    <router-link to="/index">
                        <img src="../img/news-h.png" alt="" class="footer-icon">
                        <p>资讯</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/dynamic">
                        <img src="../img/dynamic.png" alt="" class="footer-icon">
                        <p>动态</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/release">
                        <img src="../img/choice.png" alt="" class="footer-icon-big">
                    </router-link>

                </li>
                <li>
                    <router-link to="/raise">
                        <img src="../img/raise.png" alt="" class="footer-icon">
                        <p>筹帮</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/unused">
                        <img src="../img/unused-h.png" alt="" class="footer-icon">
                        <p>闲置</p>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { allDate, f } from '../assets/js/common'

export default {
    data() {
        return {
            active: 'tab-container1',
            selected: "1",
            loadingtrue: false,
            towarr: [],
            type: [],
            unusedType1: [],  //将获取到的分类的内容保存到此数组里面
            unusedType2: [],
            unusedType3: [],
            unusedType4: [],
            unusedType5: [],
            page1: 0,    //查询的页数默认是0调用的时候会加1
            page2: 0,
            page3: 0,
            page4: 0,
            page5: 0,
        };
    },
    methods: {
        test() {

        },
        // 无线下拉
        loadMore() {
            this.loading = true;
            setTimeout(() => {
                if (this.selected == "1") {
                    this.page1 += 1;    //对应的页数加一
                    this.unused(this.page1, this.towarr[0][1]);   //调用unused这个接口把页数和闲置分类id当成参数传进去
                } else if (this.selected == "2") {
                    this.page2 += 1;
                    this.unused(this.page2, this.towarr[1][1]);   //调用unused这个接口把页数和闲置分类id当成参数传进去
                } else if (this.selected == "3") {
                    this.page3 += 1;
                    this.unused(this.page3, this.towarr[2][1]);   //调用unused这个接口把页数和闲置分类id当成参数传进去
                } else if (this.selected == "4") {
                    this.page4 += 1;
                    this.unused(this.page4, this.towarr[3][1]);   //调用unused这个接口把页数和闲置分类id当成参数传进去
                } else if (this.selected == "5") {
                    this.page5 += 1;
                    this.unused(this.page5, this.towarr[4][1]);   //调用unused这个接口把页数和闲置分类id当成参数传进去
                }


                this.loading = false;
            }, 500);
        },
        goodsTypeId() {
            this.$http({
                method: "post",
                url: localPath + '/goods/selectAllGoodsType'
            }).then((data) => {
                console.log(data.data);

                for (var i = 0; i < data.data.length; i++) {
                    console.log(data.data[i].goodsTypeName);
                    // console.log(i);
                    //循环后台数据保存到this.slots[0].values.push 然后显示到页面上面 

                    this.type.push(data.data[i].goodsTypeName);
                    //把分类和分类ID放到towarr的数组里面
                    this.towarr.push([data.data[i].goodsTypeName, data.data[i].goodsTypeId]);
                }
            }).catch((error) => {
                console.log(error);

            })
        },
        unused(page, TypeId) {
            var params = new URLSearchParams();
            params.append("page", page);
            params.append("rows", 4);
            params.append("school.schoolId", localStorage.schoolId);
            params.append("goodsType.goodsTypeId", TypeId);
            params.append("orderBy", 1);

            this.$http({
                method: 'post',
                url: localPath + '/goods/goodsPageSearch',
                data: params
            }).then((data) => {
                for (let i = 0; i < data.data.message.rows.length; i++) {
                    //将时间转换一下
                    data.data.message.rows[i].createTime = allDate(data.data.message.rows[i].createTime);
                    //图片可能不是一张通过split
                    if (data.data.message.rows[i].images == "" || data.data.message.rows[i].images == null) {

                    } else {
                        data.data.message.rows[i].images = data.data.message.rows[i].images.split(",");
                    }

                    //如果显示的页面的id为1的话
                    if (this.selected == 1) {
                        //将每一条数据放入数组里面
                        this.unusedType1.push(data.data.message.rows[i]);
                    } else if (this.selected == 2) {
                        this.unusedType2.push(data.data.message.rows[i]);
                    } else if (this.selected == 3) {
                        this.unusedType3.push(data.data.message.rows[i]);
                    } else if (this.selected == 4) {
                        this.unusedType4.push(data.data.message.rows[i]);
                    } else if (this.selected == 5) {
                        this.unusedType5.push(data.data.message.rows[i]);
                    }

                }
                console.log(this.unusedType5);
            }).catch((error) => {
                console.log(error);
            })
        }
    },
    mounted() {
        this.goodsTypeId();
        document.addEventListener(f());
    },
    watch: {
        selected() {   //this.selected不等于默认的1的时候就发生改变 就调用loadMire的这个函数
            this.loadMore();
        }
    },
    directives: {
        tap: {
            // 指令的定义
            inserted: function(el) {
                el.focus()
            }
        }
    }
};
</script>
<style>
.unused-seek {
    width: 7rem;
    height: .5rem;
    margin: .2rem auto;
    padding: 0 .2rem;
    border-radius: 5px;
    border: 1px solid #333333;
    background-color: #ffffff;
}

.mint-cell-wrapper {
    padding: 0px 0px;
}

.unused-img {
    width: 2.6rem;
    height: 2.6rem;
    margin: .3rem 0 0 .12rem;
}


/*导航条*/

.unused .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 3px solid #c29354;
    color: #c29354;
    margin-bottom: 0px;
}
</style>

